<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="webjars/bootstrap/3.3.7/css/bootstrap.css">
<link rel="stylesheet" href="webjars/bootstrap/3.3.7/css/bootstrap-theme.css">
<script type="text/javascript" src="webjars/jquery/3.5.1/dist/jquery.js"></script>
<script type="text/javascript" src="webjars/bootstrap/3.3.7/js/bootstrap.js"></script>
<!-- <script type="text/javascript" src="static/js/md5.min.js"></script> -->
<style type="text/css">
    .form-horizontal{

        background-color: #fff;

        font-family: 'Arimo', sans-serif;

        text-align: center;

        padding: 50px 30px 50px;

        box-shadow: 12px 12px 0 0 rgba(0,0,0,0.3);

    }

     

    .form-horizontal .heading{

        color: #555;

        font-size: 30px;

        font-weight: 600;

        letter-spacing: 1px;

        text-transform: capitalize;

        margin: 0 0 50px 0;

    }

     

    .form-horizontal .form-group{

        margin: 0 auto 30px;

        position: relative;

    }

     

    .form-horizontal .form-group:nth-last-child(2){ margin-bottom: 20px; }

     

    .form-horizontal .form-group:last-child{ margin: 0; }

     

    .form-horizontal .form-group>i{

        color: #999;

        transform: translateY(-50%);

        position: absolute;

        left: 5px;

        top: 50%;

    }

     

    .form-horizontal .form-control{

        color: #404040;

        background-color: #fff;

        font-size: 17px;

        letter-spacing: 1px;

        height: 40px;

        padding: 5px 10px 2px 25px;

        box-shadow: 0 0 0 0 transparent;

        border: none;

        border-bottom: 1px solid rgba(0,0,0,0.1);

        border-radius: 0;

        display: inline-block;

    }

     

    .form-control::placeholder{

        color: rgba(0,0,0,0.2);

        font-size: 16px;

    }

     

    .form-horizontal .form-control:focus{

        border-bottom: 1px solid #404040;

        box-shadow: none;

    }

     

    .form-horizontal .btn{

        color: #404040;

      

        font-size: 18px;

        font-weight: 700;

        letter-spacing: 1px;

        border-radius: 5px;

        width: 50%;

        height: 45px;

        padding: 7px 30px;

        margin: 0 auto 25px;

        border: none;

        display: block;

        position: relative;

        transition: all 0.3s ease;

    }

     

  

     

    .form-horizontal .btn:before,

    .form-horizontal .btn:after{

        content: '';

        background-color: #404040;

        height: 50%;

        width: 2px;

        position: absolute;

        left: 0;

        bottom: 0;

        z-index: 1;

        transition: all 0.3s;

    }

     

    .form-horizontal .btn:after{

        bottom: auto;

        top: 0;

        left: auto;

        right: 0;

    }

     

    .form-horizontal .btn:hover:before,

    .form-horizontal .btn:hover:after{

        height: 100%;

        width: 50%;

        opacity: 0;

    }

     

    .form-horizontal .create_account{

        color: #D6BC8B;

        font-size: 16px;

        font-weight: 600;

        display: inline-block;

    }
.form-horizontal .create_account{

        color: #D6BC8B;

        font-size: 16px;

        font-weight: 600;

        display: inline-block;

    }

     

    .form-horizontal .create_account:hover{

        color: #404040;

        text-decoration: none;

    }
</style>
<title>登录</title>

</head>
<body style="height: 100hv;background-color: #555555;background-image:url(static/login.jpg)" >

    <div class="form-bg" style="margin: 160px 1400px 111px 0px;">
        <div class="container">

            <div class="row">

                <div class="col-md-offset-4 col-md-4 col-sm-offset-3 col-sm-6">

                    <form class="form-horizontal" action="login" method="post" >

                        <div class="heading">登录</div>

                        <div class="form-group">

                            <i class="glyphicon glyphicon-user"></i><input required name="username" type="text" class="form-control" placeholder="Username" id="exampleInputEmail1">

                        </div>

                        <div class="form-group">
                            <i class="glyphicon glyphicon-lock"></i><input required name="pwd" type="password" class="form-control" placeholder="Password">
                        </div>

                        <div class="form-group">

                            <button type="submit" class="btn btn-default"><i class="glyphicon glyphicon-menu-right"></i></button>


                        </div>

                    </form>

                </div>

            </div>

        </div>

    </div>
</body>
</html>